<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>访客记录</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../css/main.css">
	<style>
		.select_date {
			margin-left: 10px;
		}

		.out {
			box-shadow: 0 0 2px 1px #aaa;
			margin: 10px 10px 20px;
			border-radius: 10px;
			padding: 10px 0;
		}
	</style>
</head>

<body>

<div class="contain">
	<div class="header">
		<div class="header_title">访客记录</div>
		<a onclick="history.back()">
			<img src="../image/return.png" alt="" class="return">
		</a>
	</div>
</div>
<div style="height: 40px;"></div>

<div id="vue-root">

	<div class="select_all">
		<input class="select_date" type="date" v-model="date">
	</div>

	<table width="92%" class="out" v-for="(guest,index) in list" :key="index">
		<tr>
			<th width="100">序号：</th>
			<td width="100" v-text="index+1"></td>
			<td rowspan="5">
				<img v-if="guest.pic" :src="getImg(guest.pic)" @click="view(guest.pic)"
					 style="max-height: 80%;max-width: 80%;">
			</td>
		</tr>
		<tr>
			<th>姓名：</th>
			<td v-text="guest.idCard.name"></td>
		</tr>
		<tr>
			<th>性别：</th>
			<td v-text="guest.idCard.sex"></td>
		</tr>
		<tr>
			<th>体温：</th>
			<td>{{guest.temperature}}℃</td>
		</tr>
		<tr>
			<th>时间：</th>
			<td v-text="format(guest.time)"></td>
		</tr>
	</table>


</div>

<script src="/scriptZIP/qs.min.js"></script>
<script src="/scriptZIP/vue.min.js"></script>
<script src="/scriptZIP/axios.min.js"></script>
<script src="/scriptZIP/dayjs.min.js"></script>

<script src="/js/common.js"></script>



<script src="/wechat/js/wx.js"></script>

<script>

	var schoolId;

	var app = new Vue({
		el: '#vue-root',
		data: {
			date: dayjs().format('YYYY-MM-DD'),
			list: []
		},
		created: function () {
			var date = params().date;
			if (date) this.date = date;
			var teacher = getTeacher();
			if (teacher) {
				schoolId = teacher.schoolId;
				this.getData();
			} else {
				axios.get('/t/bound').then(function (res) {
					schoolId = res.data.schoolId;
					this.getData();
				}.bind(this));
			}
		},
		methods: {
			getData: function () {
				axios.get('/t/guest', {params: {date: this.date}}).then(function (res) {
					this.list = res.data;
				}.bind(this));
			},
			getImg: function (pic) {
				if (!pic) return null;
				return '/static/' + schoolId + '/attendance/' + pic;
			},
			format: function (time) {
				if (!time) return null;
				return dayjs(time).format('HH:mm:ss');
			},
			view: function (pic) {
				wxPreviewImg([this.getImg(pic)], 0);
			},
		},
		watch: {
			date: function (newValue, oldValue) {
				this.getData();
			}
		}
	});
</script>


</body>

</html>